<template>
    <div class="farmBoard">
        <boardTop :name='title'></boardTop>
        <div class="body">
            <div class="top__xLTkj">
                <div class="left__0Xuby">
                    <span class="title__YP5vH">工单产出分析</span>
                    <span class="ex__jpApO">近10天</span>
                    <div class="splitLine__b0b5h"></div>
                    <echartCommon ref="gdccfx" id-name="gdccfx" style="height:45%"></echartCommon>
                    <echartCommon ref="ygjx" id-name="ygjx" style="height:45%"></echartCommon>
                </div>
                <div class="middle__U0vHR">
                    <div class="top__xLTkj">
                        <div class="outer__nYX_m">
                            <div class="outerWrapper__dcXzU">
                                <div class="processing__OkrfR" style="color:#76f2ac"
                                    :title="statisticsData.dayProduceTotalNumber">
                                    {{statisticsData.dayProduceTotalNumber}}</div>
                                <span>今日产量总数</span>
                                <div class="splitLine__b0b5h"></div>
                            </div>
                            <div class="outerWrapper__dcXzU">
                                <div class="processing__OkrfR" style="color:#fb6583"
                                    :title="statisticsData.workOrderDelayNumber">{{statisticsData.workOrderDelayNumber}}
                                </div>
                                <span>在制工单延期数</span>
                                <div class="splitLine__b0b5h"></div>
                            </div>
                            <div class="outerWrapper__dcXzU">
                                <div class="processing__OkrfR" style="color:#04f9fe"
                                    :title="statisticsData.dayReportTotalNumber">{{statisticsData.dayReportTotalNumber}}
                                </div>
                                <span>今日报工总数</span>
                                <div class="splitLine__b0b5h"></div>
                            </div>
                        </div>
                        <div class="inner__u33FY">
                            <div class="processing__OkrfR" style="color:#04f9fe"
                                :title="statisticsData.workOrderNumber">{{statisticsData.workOrderNumber}}</div>
                            <span>在制工单数</span>
                        </div>
                        <div class="inner__u33FY">
                            <div class="processing__OkrfR" style="color:#04f9fe" :title="statisticsData.missionNumber">
                                {{statisticsData.missionNumber}}</div>
                            <span>在制任务数</span>
                        </div>
                        <div class="outer__nYX_m">
                            <div class="outerWrapper__dcXzU">
                                <div class="processing__OkrfR" style="color:#76f2ac"
                                    :title="statisticsData.dayFinishedMNumber">{{statisticsData.dayFinishedMNumber}}
                                </div>
                                <span>今日完成任务数</span>
                                <div class="splitLine__b0b5h"></div>
                            </div>
                            <div class="outerWrapper__dcXzU">
                                <div class="processing__OkrfR" style="color:#fb6583"
                                    :title="statisticsData.missionDelayNumber">{{statisticsData.missionDelayNumber}}
                                </div>
                                <span>在制任务延期数</span>
                                <div class="splitLine__b0b5h"></div>
                            </div>
                            <div class="outerWrapper__dcXzU">
                                <div class="processing__OkrfR" style="color:#fb6583"
                                    :title="statisticsData.dayBadProductRate">{{statisticsData.dayBadProductRate}}%
                                </div>
                                <span>今日不良品率</span>
                                <div class="splitLine__b0b5h"></div>
                            </div>
                        </div>
                    </div>
                    <div class="bottom__7sDHZ">
                        <vue-seamless-scroll :data="produceReportList.length <= 4 ? [] : produceReportList"
                            :class-option="classOption" class="scroll_bottom__1d7Py">
                            <div class="scrollWrapper__219FY" v-for="(item,index) in produceReportList" :key="index">
                                <el-row :gutter="10">
                                    <el-col :span="5">
                                        <span :title="item.time">{{item.time}}</span>
                                    </el-col>
                                    <el-col :span="4">
                                        <span :title="item.produceName+' - '+item.processName">{{item.produceName}}
                                            | {{item.processName}}</span>
                                    </el-col>
                                    <el-col :span="7">
                                        <span :title="item.productCode+' - '+item.productName">{{item.productCode}}
                                            | {{item.productName}}</span>
                                    </el-col>
                                    <el-col :span="4">
                                        <span>良品{{item.goodProduct}}</span>
                                    </el-col>
                                    <el-col :span="4">
                                        <span :title="item.badProduct">不良品{{item.badProduct}}</span>
                                    </el-col>
                                </el-row>
                            </div>
                        </vue-seamless-scroll>
                        <img src="@/assets/farmBoard/KB_noContent.png" alt="" class="empty__vq1hK"
                            v-if="!produceReportList.length">
                    </div>
                </div>
                <div class="right__RYeVn">
                    <span class="title__YP5vH">不良品分析</span>
                    <span class="ex__jpApO">近10天</span>
                    <div class="splitLine__b0b5h"></div>
                    <echartCommon ref="blpqs" id-name="blpqs" style="height:45%"></echartCommon>
                    <echartCommon ref="blpxfb" id-name="blpxfb" style="height:45%"></echartCommon>
                </div>
            </div>
            <div class="bottom__7sDHZ">
                <div class="left__0Xuby">
                    <span class="title__YP5vH">已完成工单</span>
                    <span class="ex__jpApO">近7天</span>
                    <my-table :targetTimer="'todayEndTimer'" :dynamicClass="'end'" ref="myTableEnd" @intervalFn="intervalFn"></my-table>
                </div>
                <div class="right__RYeVn">
                    <span class="title__YP5vH">未完成工单</span>
                    <my-table :targetTimer="'allIngTimer'" :dynamicClass="'ing'" ref="myTableIng" @intervalFn="intervalFn"></my-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        dataFirst,
        dataSecond
    } from '@/api/dataController'
    import {
        produceReport
    } from '@/api/homeController'
    import {
        gdccfxOption,
        ygjxOption,
        blpxOption
    } from "./echartOptions.js";
    import myTable from './myTable.vue'
    import echartCommon from "./echartCommon.vue";
    import * as echarts from 'echarts/core';
    export default {
        data() {
            return {
                statisticsData: {
                    dayProduceTotalNumber: '',
                    workOrderDelayNumber: '',
                    dayReportTotalNumber: '',
                    dayProduceWONumber: '',
                    workOrderNumber: '',
                    missionNumber: '',
                    dayFinishedMNumber: '',
                    dayBadProductRate: '',
                    missionDelayNumber: ''
                },
                listData: [],
                produceReportList: [],
                title: '车间生产监控大屏',
                allTimer:10000,
                tableEndPayload:{
                    actualEndTimeLeft: this.utils.formatTime(new Date().getTime() - 3600 * 1000 * 24 * 7, 'yyyy-MM-dd 00:00:00'),
                    actualEndTimeRight: this.utils.formatTime(new Date(), 'yyyy-MM-dd 23:59:59'),
                    stateList: [2]
                },
                tableIngPayload:{
                    stateList: [1]
                }
            }
        },
        components: {
            echartCommon,
            myTable
        },
        computed: {
            classOption() {
                return {
                    step: 0.5,
                    hoverStop: true,
                };
            },
        },
        mounted() {
            this.handleFull()
            this.getDataFirst()
            this.getDataSecond()
            this.getProduceReport()
            //获取当天结束的工单
            this.$refs.myTableEnd.getWorkOrderOverview(this.tableEndPayload)
            //获取所有执行中的工单
            this.$refs.myTableIng.getWorkOrderOverview(this.tableIngPayload)
        },
        methods: {
            //车间看板中间数据&&工单产出分析&&员工绩效top5
            getDataFirst: async function(){
                const res = await dataFirst()
                this.statisticsData = Object.freeze(res.data.dataNum)
                this.$refs.gdccfx.show(gdccfxOption('工单产出趋势图', '完成工单', '工单产出', res.data.produce,
                    echarts))
                this.$refs.ygjx.show(ygjxOption(echarts, res.data.performance))
                clearInterval(window.dataFirstTimer)
                window.dataFirstTimer = setInterval(() => {
                    this.getDataFirst()
                }, this.allTimer)
            },
            //不良品分析&&分布&&任务执行进度
            getDataSecond: async function(){
                const res = await dataSecond()
                this.listData = res.data.mission
                this.$refs.blpqs.show(gdccfxOption('不良品趋势图', '不良品数', '不良品率', res.data.badProductData,
                    echarts))
                this.$refs.blpxfb.show(blpxOption(res.data.badProduct))
                clearInterval(window.dataSecondTimer)
                window.dataSecondTimer = setInterval(() => {
                    this.getDataSecond()
                }, this.allTimer)
            },
            getProduceReport: async function(){
                const res = await produceReport()
                this.produceReportList = res.data
                clearInterval(window.produceReportTimer)
                window.produceReportTimer = setInterval(() => {
                    this.getProduceReport()
                }, this.allTimer)
            },
            intervalFn(payload){
                const {timerName,pageCount,intervalTime} = payload
                let time = pageCount === 0 ? intervalTime : pageCount * intervalTime
                if(timerName === 'todayEndTimer'){
                    clearInterval(window.todayEndTimer)
                    window.todayEndTimer = setInterval(() => {
                        this.$refs.myTableEnd.getWorkOrderOverview(this.tableEndPayload)
                    }, time)
                }else{
                    clearInterval(window.allIngTimer)
                    window.allIngTimer = setInterval(() => {
                        this.$refs.myTableIng.getWorkOrderOverview(this.tableIngPayload)
                    }, time)
                }
            },
            handleFull(){
                if (document.fullscreenEnabled) { //是否支持全屏
                    let elem = document.querySelector(".farmBoard");
                    elem.requestFullscreen()
                } else {
                    this.utils.showMsg('你的浏览器不支持全屏模式！', 'error')
                }
            },
        },
        beforeRouteLeave(to, from, next) {
            clearInterval(window.dataFirstTimer)
            clearInterval(window.dataSecondTimer)
            clearInterval(window.produceReportTimer)
            clearInterval(window.todayEndTimer)
            clearInterval(window.allIngTimer)
            next()
        }
    }
</script>

<style lang="less" scoped>
    .farmBoard {
        position: relative;
        width: 100%;
        height: 100%;
        background: url(~@/assets/farmBoard/KB_BG.jpg);
        background-size: 100% 100%;

        .body {
            height: 90%;

            .top__xLTkj {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                height: 63%;

                .left__0Xuby,
                .right__RYeVn {
                    width: 30%;
                    background: url(~@/assets/farmBoard/KB_borderTop.png);
                    min-width: 300px;
                    min-height: 340px;
                }

                .middle__U0vHR {
                    width: 40%;
                    padding: 30px 20px;
                    background: url(~@/assets/farmBoard/KB_borderTopMiddle.png);
                    background-size: 60% 60%;
                    background-repeat: no-repeat;
                    background-position: center;
                    margin: 10px 0;
                    min-width: 545px;
                    min-height: 340px;

                    .top__xLTkj {
                        height: 75%;
                        width: 100%;
                        margin-bottom: 3%;

                        .outer__nYX_m {
                            height: 100%;
                            min-height: 230px;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;

                            .outerWrapper__dcXzU {
                                position: relative;
                                padding: 8px 15px 0;
                                height: 25%;
                                min-height: 60px;
                                flex: 1;

                                .splitLine__b0b5h {
                                    position: absolute;
                                    left: 0;
                                    right: 0;
                                    margin: auto;
                                    bottom: 5px;
                                    width: calc(100% - 25px);
                                    border-bottom: 1px solid rgba(4, 249, 254, .4);
                                }
                            }
                        }

                        .inner__u33FY {
                            padding: 8px 15px 0;
                            height: 33%;
                            min-height: 60px;
                        }

                        .outer__nYX_m,
                        .inner__u33FY {
                            position: relative;
                            width: 23%;
                            border: 1px solid #04f9fe;
                            border-radius: 2px;
                        }

                        .outerWrapper__dcXzU,
                        .inner__u33FY {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-evenly;
                            align-items: center;

                            span {
                                display: inline-block;
                                color: #fff;
                                font-size: 14px;
                                white-space: nowrap;
                            }

                            .processing__OkrfR {
                                font-size: 25px;
                            }
                        }

                        .outer__nYX_m::before,
                        .inner__u33FY::before {
                            position: absolute;
                            right: 0;
                            top: 0;
                            content: "";
                            border-top: 8px solid #04f9fe;
                            border-left: 8px solid transparent;
                        }

                        .outer__nYX_m::after,
                        .inner__u33FY::after {
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            content: "";
                            border-bottom: 8px solid #04f9fe;
                            border-right: 8px solid transparent;
                        }
                    }

                    .bottom__7sDHZ {
                        width: 100%;
                        height: 25%;
                        border: 1px solid #04f9fe;
                        position: relative;
                        border-radius: 2px;

                        &::before {
                            position: absolute;
                            right: 0;
                            top: 0;
                            content: "";
                            border-top: 8px solid #04f9fe;
                            border-left: 8px solid transparent;
                        }

                        &::after {
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            content: "";
                            border-bottom: 8px solid #04f9fe;
                            border-right: 8px solid transparent;
                        }
                    }
                }

                .right__RYeVn {
                    min-width: 340px;
                }
            }

            .bottom__7sDHZ {
                position: relative;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                margin-top: -1%;
                height: 44%;
                padding: 8px 0;

                .left__0Xuby,
                .right__RYeVn {
                    background: url(~@/assets/farmBoard/KB_borderBottom_left.png);
                    min-height: 135px;
                    flex: 1;
                }

                .empty__vq1hK {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 100px;
                }

                .scroll_bottom__1d7Py {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                }

                .scrollWrapper__219FY {
                    span {
                        width: 100%;
                        display: inline-block;
                        font-size: 12px;
                        transform: scale(.85);
                        transform-origin: left center;
                        color: #fff;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
            }

            .top__xLTkj,
            .bottom__7sDHZ {

                .left__0Xuby,
                .right__RYeVn {
                    background-size: 100% 100%;
                    margin: 10px;
                    padding: 15px;
                    font-size: 16px;
                    color: #04f9fe;

                    .title__YP5vH {
                        display: inline-block;
                        margin-left: 15px;
                        margin-top: 5px;
                        font-weight: 600;
                    }

                    .ex__jpApO {
                        display: inline-block;
                        transform: scale(.75);
                        transform-origin: center;
                    }

                    .splitLine__b0b5h {
                        margin: 5px 3px 10px 15px;
                        border-bottom: 1px solid rgba(4, 249, 254, .4);
                    }
                }
            }
        }
    }
</style>
